<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
.jtabs{
	position: fixed;
	height:3rem;
	background:#f5f5f5;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	display: -webkit-flex;
	font-size:16px;
}
.jtabheight{
	height:3rem;
}
.jtab-item{
	display: block;
	flex: 1;
	-webkit-flex: 1;
	text-align: center;
	line-height:3rem;
}
.jtab-active{
	color: dodgerblue;
	border-bottom: 2px solid dodgerblue;
}
#shopimg{
	position:relative;
	font-size: 0;
}
#shopingo{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
	padding: 5rem;
}
#shoptitle{
	background: rgba(0,0,0,0.3);
	border-radius: 10rem;
	padding: 0.5rem 1rem 0.5rem 1rem;
	color: #f5f5f5;
	font-size:18px;
}
#gaunzhus{
	color: #fff;
	padding-top: 0.5rem;
	font-size:14px;
}
.guanzhustitle{
	color: #FFAF00;
}
.colorred{
color: #FFAF00;
}
#guanzhuline{
	padding: 0 1rem 0 1rem;
}
#shopbtn{
	width: auto;
	height: 6.5rem;
	background: #fff;
	position: relative;
	display: flex;
	display: -webkit-flex;
	line-height: 4.5rem;
	font-size: 1.6rem;
	padding: 1rem 0 1rem 0;
}
.shopbtnitem{
	display: block;
	flex: 1;
	-webkit-flex: 1;
	text-align: center;
	height: 4rem;
	position: relative;
}
#shopbtnitem1,#shopbtnitem2{
	border-right: 1px solid #eee;
}
.icontb{
	color: #FFAF00;
	padding-right: 0.5rem;
	font-weight: bold;
	font-size: 1.8rem;
}
.sheight{
	height: 1rem;
}
.shop-detail{
	padding: 1.5rem;
	background: #fff;
	position: relative;
}
.shopline{
	display: flex;
	display: -webkit-flex;
	height: auto;
	padding: 0.7rem 0 0.7rem 0;
	font-size: 1.4rem;
}
.shopline-l{
	color: #888;
	padding-right: 1rem; 
}
.shopline-r{
	flex: 1;
	-webkit-flex: 1;
}
.icon-list{
	padding-right: 0.5rem;
	color: dodgerblue;
	font-size: 1.8rem;
	line-height: 1.7rem;
}
.shop-content-img{
	position: relative;
	padding-top: 1rem;
}
.item-t-sr-b{
	padding-top:0;
}
.red{
		color: red;
	}
	
/**index-list***/
.list-item{
	background: #fff;
	padding:10px;
	margin-bottom:10px;
}
.list-item-t{
	display: flex;
	display: -webkit-flex;
	position: relative;
	padding-bottom: 10px;
}
.item-t-sl{
	display: block;
	width:50px;
	height:50px;
	background: #ccc;
	border-radius:50px;
	overflow: hidden;
}
.item-t-sr{
	-webkit-flex: 1;
	-webkit-box-flex: 1;
	position: relative;
	padding:5px 0 0 10px;
}
.item-t-sr-t{
	font-size: 16px;
	padding-bottom:5px;
}
.list-item-c{
	font-size: 18px;
	padding-bottom: 10px;
	line-height:25px;
}
.item-t-sr-b{
	color: #999;
	font-size: 12px;
}

.list-item-b{
	display: flex;
	display: -webkit-flex;
	justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
}
.ib-imgitem{
	width: auto;
	height: 100px;
	-webkit-box-flex: 1;
	background:#ddd;
	margin-bottom: 5px;
	overflow: hidden;
	font-size: 0;
	overflow: hidden;
}
.item-t-srb-gz{
	float: right;
	position: absolute;
	right: 0;
	background: #FFC72C;
	color: #fff;
	padding:5px 15px 5px 15px;
	border-radius: 100px;
	font-size: 12px;
}
.list-item-b2{
	display: flex;
	position: relative;
	padding: 10px 0 0 0;
	font-size:1rem;
}
.list-item-btn{
	display: block;
	width: 33.333333%;
	-webkit-box-flex: 1;
	color: #999;
	border-right: 1px solid #eee;
}
.list-item-btn:last-child{
	border-right-width: 0;
}
.tright{
	text-align: right;
}
.topic{
	width: 100%;
	height:45px;
	background: #ddd;
	padding: 5px;
}
#seachinput{
	display: block;
	height:35px;
	font-size: 14px;
	background: url(img/search.png) left center no-repeat #fff;
	background-size: 20px 20px;
	text-indent: 20px;
	box-shadow:0 0 1px #ccc;
	border-width: 0;
	-webkit-box-shadow:0 0 1px #ddd;
}
#jcontent{
	padding-bottom: 15px;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div class="jtabs">
		<a id="zhuye" class="jtab-item"><i class="iconfont icon-dianjia"></i>&nbsp;&nbsp;主页</a>
		<a id="dt" class="jtab-item  jtab-active"><i class="iconfont icon-dongtaidongtai"></i>&nbsp;&nbsp;动态</a>
	</div>
	<div class="jtabheight"></div>
	<div id="shopimg">
		<img id="topimg" src="../img/zw3.png" class="img"/>
		<div id="shopingo">
			<span id="shoptitle">加载中...</span>
			<p id="gaunzhus">
				关注:&nbsp;&nbsp;<span id="followNum" class="guanzhustitle"></span>
				<span id="guanzhuline">|</span>
				粉丝:&nbsp;&nbsp;<span id="fansNum" class="guanzhustitle"></span>
			</p>
		</div>
	</div>
	<div class="sheight"></div>
	<div id="data-list"></div>
	<div id="loadingMore"></div>
</div>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.plusReady(function(){
	document.getElementById("shoptitle").innerHTML=webapp.GetQueryString("shoptitle");
	document.getElementById("followNum").innerHTML=webapp.GetQueryString("followNum");
	document.getElementById("fansNum").innerHTML=webapp.GetQueryString("fansNum");
	window.setTimeout(function(){
		initData();
	},360);
});

/**
 * 
 * 初始化数据
 * 
 */
function initData(){
	document.getElementById("topimg").setAttribute("src",webapp.GetQueryString("topimg"));
	_currentWebview=plus.webview.currentWebview();
	loadUtil.loadList({
		data:{
			id:webapp.GetQueryString("id"),
			pageSize:webapp.config.pageSize
		},
		url:"/carLife/common/interface/dynamic/selectPageById"
	});
	
	
	//滚动到底部
	document.addEventListener( "plusscrollbottom",function(){
		loadUtil.scrollBottom();
	}, false );
	//下拉加载最新数据 
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		loadUtil.pullToRefresh();
	});
	
	mui('#jcontent').on('tap', '#zhuye', function(e) {
		plus.webview.getTopWebview().hide("auto");
	});
}

mui('#jcontent').on('tap', '.taped', function(e) {
	var _class=this.classList;
	if(_class.contains("taped-1")){
		guanzhu(this.getAttribute("data-id"));
	}else if(_class.contains("taped-2")){
		var thisId=this.getAttribute("data-id");
		webapp.openByTpl({
			title:"动态详情",
			hrefs:"/tpl/detail.html?id="+thisId
		});
	}
});

/*
 * 关注
 * @param {Object} ele 被点击的元素
 */
function guanzhu(id){
	//发送关注请求
	mui.toast("关注成功");
}
// taped taped-1
//plsave();
//	
//	//加载数据
	
//	//滚动到底部
//	document.addEventListener( "plusscrollbottom",function(){
//		loadUtil.scrollBottom();
//	}, false );
//	//下拉加载最新数据 
//	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
//		loadUtil.pullToRefresh();
//	});
//		
//	mui('.jcontent').on('tap','.item-bar-pinlun', function() {
//		var thisId=this.getAttribute("data-id");
//	webapp.openByTpl({
//		title:"评论界面",
//		hrefs:"/tpl/pinglun.html?id="+thisId
//		});
//	});
//	//点赞操作
//	mui('.jcontent').on('tap','.item-bar-item-dianzan', function() {
//			dianzan(this);
//		});
//function plsave(){
//	var id=
//	webapp.ajax({
//		url:"/carLife/common/interface/dynamic/selectPageById",
//		data:{
//			id:id,
//			pageSize:webapp.config.pageSize,
//			token:webapp.getToken()
//		},
//		success:function(json){
//			if(json.code==200){
//				json.imgPath=webapp.config.restUrl;
//				var nummber = template('tpl-list',json);
//				var gongZong=document.getElementById("data-list");
//				gongZong.innerHTML=nummber;
//			}else if(json.code=="201"){
//				mui.toast("请求失败");
//			}
//		}
//	});	
//}
/**
 * 点赞
 * @param {Object} ele 被点击的元素
 */
function dianzan(ele){
	//webapp.showWaiting();
	//获取该数据的id
	var thisId=ele.getAttribute("data-id");
	//是否已经为该条点过赞
	if(plus.storage.getItem("dianzan_"+thisId)=="1"){
		plus.nativeUI.toast("请勿重复点赞！");
		return;
	}
	//发送点赞请求
	webapp.ajax({
		url:"/carLife/admin/interface/praise/isOrNotPraise",
		data:{
			token:webapp.getToken(),
			dynamicId:thisId
		},
		success:function(json){				
			plus.nativeUI.toast(json.msg);
			//把该图标设置为红色
			webapp.debug(json);
			if(json.code=="200"){
				ele.innerHTML="<i class=\"iconfont icon-dianzan\"></i>已点赞";
				ele.classList.add("red");
			}else{
				ele.innerHTML="<i class=\"iconfont icon-dianzan\"></i>点赞";
				ele.classList.remove("red");
			}
			//webapp.closeWaiting();
		}
	});
}	
	
	
	
	
</script>
<!--以下为模板--->
<script id="tpl-list" type="text/html">
{{each data as item i}}
<div id="tpl-list" class="list-item"  data-id="{{item.id}}">
		<div class="list-item-t">
			<a class="item-t-s item-t-sl taped taped-1" business-sellerId="{{item.sellerId}}">
				<img data-src="" src="{{imgPath}}{{item.logoImageMap.path}}-120{{item.logoImageMap.type}}" class="img"/>
			</a>
			<div class="item-t-s item-t-sr">
				<div class="item-t-sr-t">{{item.sellerName}}</div>
				<div class="item-t-sr-b">{{dateFormat(item.createTime,"yyyy-MM-dd HH:mm")}} 来自{{item.createUser}}</div>
			</div>
			<a  data-id="{{item.id}}" class="item-t-srb-gz  taped taped-1" name="follow_seller">关注</a>
		</div>
		<div class="list-item-c  taped taped-2" data-id="{{item.id}}">
			{{item.content}}
		</div>
		<div class="list-item-b  taped taped-2" data-id="{{item.id}}">
			{{if item.imagesList.length>0}}
				{{each item.imagesList as imgeItem j}}
				<div id="item-imgs-item-{{j}}" class="ib-imgitem" style="width:{{imgW}}px;height: {{imgW}}px;">
					<img src="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}"  class="img"/></div>
				{{/each}}
				{{if item.imagesList.length==2 || item.imagesList.length==5 || item.imagesList.length==8}}
				<div class="ib-imgitem noimg" style="width:{{imgW}}px;height: {{imgW}}px;"></div>
				{{/if}}
			{{/if}}
		</div>
		<div class="list-item-b2 line-t">
			<a class="list-item-btn">
				<i class="iconfont icon-pinglun"></i>
				评论
			</a>
			<a class="list-item-btn tcenter">
				<i class="iconfont icon-zhuanfa"></i>
				转发
			</a>
			<a class="list-item-btn tright">
				<i class="iconfont icon-i9"></i>
				点赞
			</a>
		</div>
	</div>
{{/each}}
</script>
</body>
</html>
